<template>
  <div class="shop-container">
    <div class="shop-header">
      <h2>英语学习商城</h2>
      <div class="filter-section">
        <div class="search-box">
          <input type="text" v-model="searchKeyword" placeholder="搜索商品..." @input="handleSearch" />
        </div>
        <div class="category-filter">
          <span
            v-for="category in categories"
            :key="category.value"
            :class="['category-tag', { active: currentCategory === category.value }]"
            @click="currentCategory = category.value"
          >
            {{ category.label }}
          </span>
        </div>
      </div>
    </div>

    <div class="products-grid">
      <div v-for="product in filteredProducts" :key="product.id" class="product-card">
        <div class="product-image">
          <img :src="product.image" :alt="product.name" />
          <span class="product-tag" :class="product.type">{{ getTypeLabel(product.type) }}</span>
        </div>
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <p class="product-desc">{{ product.description }}</p>
          <div class="product-meta">
            <span class="product-price">¥{{ product.price.toFixed(2) }}</span>
            <span class="product-sales">已售 {{ product.sales }}</span>
          </div>
          <button class="buy-btn" @click="handleBuy(product)">立即购买</button>
        </div>
      </div>
    </div>

    <!-- 购买确认对话框 -->
    <div class="dialog-overlay" v-if="showBuyDialog" @click="showBuyDialog = false">
      <div class="dialog-content" @click.stop>
        <h3>确认购买</h3>
        <div class="product-preview" v-if="selectedProduct">
          <img :src="selectedProduct.image" :alt="selectedProduct.name" />
          <div class="preview-info">
            <h4>{{ selectedProduct.name }}</h4>
            <p class="preview-price">¥{{ selectedProduct.price.toFixed(2) }}</p>
          </div>
        </div>
        <div class="dialog-actions">
          <button class="btn-secondary" @click="showBuyDialog = false">取消</button>
          <button class="btn-primary" @click="confirmBuy">确认购买</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Shop',
  data() {
    return {
      currentCategory: 'all',
      searchKeyword: '',
      showBuyDialog: false,
      selectedProduct: null,
      categories: [
        { label: '全部', value: 'all' },
        { label: '教材教具', value: 'teaching' },
        { label: '学习用品', value: 'study' },
        { label: '文具玩具', value: 'stationery' }
      ],
      products: [
        // 教材教具类商品 (teaching)
        {
          id: 1,
          name: '牛津英语教材全套',
          description: '包含教材、教师用书、练习册等完整配套资源',
          price: 299.0,
          image: 'https://img0.baidu.com/it/u=2530904894,848542727&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700',
          type: 'teaching',
          sales: 156,
          forRoles: ['teacher']
        },
        {
          id: 2,
          name: '多媒体教学资源包',
          description: '包含音频、视频、PPT等丰富教学资源',
          price: 199.0,
          image: 'https://img2.baidu.com/it/u=1602083815,1793819671&fm=253&fmt=auto&app=138&f=PNG?w=927&h=500',
          type: 'teaching',
          sales: 89,
          forRoles: ['teacher']
        },
        {
          id: 9,
          name: '剑桥少儿英语教程',
          description: '系统化的英语教学体系，适合3-12岁儿童',
          price: 458.0,
          image: 'https://img0.baidu.com/it/u=2465658105,3183753803&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=760',
          type: 'teaching',
          sales: 234,
          forRoles: ['teacher']
        },
        {
          id: 10,
          name: '英语课堂游戏卡片',
          description: '100种课堂互动游戏，激发学习兴趣',
          price: 68.0,
          image: 'https://img2.baidu.com/it/u=781802511,4183042720&fm=253&fmt=auto&app=138&f=JPEG?w=790&h=500',
          type: 'teaching',
          sales: 445,
          forRoles: ['teacher']
        },
        {
          id: 11,
          name: '英语语音教学套装',
          description: '包含发音挂图、卡片和教具，辅助语音教学',
          price: 159.0,
          image: 'http://t15.baidu.com/it/u=3610435077,2790932530&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'teaching',
          sales: 167,
          forRoles: ['teacher']
        },
        {
          id: 12,
          name: '英语教学挂图全套',
          description: '主题式教学挂图，图文并茂，直观教学',
          price: 239.0,
          image: 'https://img0.baidu.com/it/u=3404829332,1502841546&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
          type: 'teaching',
          sales: 98,
          forRoles: ['teacher']
        },
        {
          id: 13,
          name: '英语课堂评估工具包',
          description: '多维度评估表格和工具，科学评估学习效果',
          price: 89.0,
          image: 'http://t15.baidu.com/it/u=1301612052,1724616505&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'teaching',
          sales: 122,
          forRoles: ['teacher']
        },
        {
          id: 14,
          name: '英语戏剧教学道具',
          description: '角色扮演道具套装，生动有趣的课堂活动',
          price: 199.0,
          image: 'https://img1.baidu.com/it/u=4107025058,1111452002&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
          type: 'teaching',
          sales: 76,
          forRoles: ['teacher']
        },
        {
          id: 15,
          name: '英语教学计划模板',
          description: '标准化教案模板，提高备课效率',
          price: 49.9,
          image: 'https://img0.baidu.com/it/u=2888849585,1797972337&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
          type: 'teaching',
          sales: 334,
          forRoles: ['teacher']
        },
        {
          id: 16,
          name: '英语课堂管理工具',
          description: '班级管理和课堂纪律维护必备工具',
          price: 79.9,
          image: 'https://img0.baidu.com/it/u=3100513284,1607011110&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=500',
          type: 'teaching',
          sales: 245,
          forRoles: ['teacher']
        },

        // 学习用品类商品 (study)
        {
          id: 3,
          name: '英语启蒙绘本套装',
          description: '精选30册英语绘本，适合3-12岁孩子',
          price: 168.0,
          image: 'https://img1.baidu.com/it/u=58478141,298269095&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=533',
          type: 'study',
          sales: 245,
          forRoles: ['parent']
        },
        {
          id: 4,
          name: '英语学习平板',
          description: '内置海量学习资源，智能辅导系统',
          price: 999.0,
          image: 'https://img2.baidu.com/it/u=3736319155,115359106&fm=253&fmt=auto&app=120&f=PNG?w=285&h=285',
          type: 'study',
          sales: 67,
          forRoles: ['parent', 'student']
        },
        {
          id: 17,
          name: '英语发音练习机',
          description: '标准发音，实时纠正，提高口语水平',
          price: 299.0,
          image: 'https://img0.baidu.com/it/u=3621529528,2651891353&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=967',
          type: 'study',
          sales: 189,
          forRoles: ['parent', 'student']
        },
        {
          id: 18,
          name: '英语单词记忆卡',
          description: '科学记忆方法，快速掌握核心词汇',
          price: 59.9,
          image: 'https://img2.baidu.com/it/u=370471907,2687760806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
          type: 'study',
          sales: 567,
          forRoles: ['student']
        },
        {
          id: 19,
          name: '英语听力训练耳机',
          description: '高清音质，舒适佩戴，专注听力训练',
          price: 149.0,
          image: 'https://img2.baidu.com/it/u=1816190516,3290308241&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          type: 'study',
          sales: 234,
          forRoles: ['student']
        },
        {
          id: 20,
          name: '英语阅读理解训练册',
          description: '分级阅读材料，提高理解能力',
          price: 45.9,
          image: 'https://img1.baidu.com/it/u=4030224468,4197301468&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1144',
          type: 'study',
          sales: 678,
          forRoles: ['student']
        },
        {
          id: 21,
          name: '英语口语练习软件',
          description: 'AI语音识别，实时评分反馈',
          price: 199.0,
          image: 'https://img2.baidu.com/it/u=3121538386,3085376336&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
          type: 'study',
          sales: 345,
          forRoles: ['parent', 'student']
        },
        {
          id: 22,
          name: '英语考试模拟题库',
          description: '真题模拟，详细解析，提高考试成绩',
          price: 79.9,
          image: 'http://t13.baidu.com/it/u=949107958,775921370&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'study',
          sales: 456,
          forRoles: ['student']
        },
        {
          id: 23,
          name: '英语语法练习册',
          description: '系统语法训练，夯实基础知识',
          price: 39.9,
          image: 'https://img0.baidu.com/it/u=2267834215,3360303993&fm=253&fmt=auto&app=138&f=JPEG?w=763&h=500',
          type: 'study',
          sales: 789,
          forRoles: ['student']
        },
        {
          id: 24,
          name: '英语词根词缀卡片',
          description: '词源分析，助记速记，扩充词汇量',
          price: 49.9,
          image: 'http://t14.baidu.com/it/u=3143335075,3347787800&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'study',
          sales: 234,
          forRoles: ['student']
        },

        // 文具玩具类商品 (stationery)
        {
          id: 5,
          name: '趣味英语单词卡',
          description: '300张双面彩印单词卡，配套游戏玩法',
          price: 39.9,
          image: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00641-3422.jpg',
          type: 'stationery',
          sales: 412,
          forRoles: ['student']
        },
        {
          id: 6,
          name: '英语学习文具套装',
          description: '包含笔记本、荧光笔、贴纸等多种文具',
          price: 49.9,
          image: 'https://img1.baidu.com/it/u=2302456079,3351053158&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1044',
          type: 'stationery',
          sales: 378,
          forRoles: ['student']
        },
        {
          id: 25,
          name: '英语单词印章套装',
          description: '趣味印章，边玩边学习单词',
          price: 69.9,
          image: 'https://img1.baidu.com/it/u=3506567867,2981424364&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=564',
          type: 'stationery',
          sales: 567,
          forRoles: ['student']
        },
        {
          id: 26,
          name: '英语学习便利贴',
          description: '创意设计，随手贴，随时记',
          price: 19.9,
          image: 'https://img1.baidu.com/it/u=632387090,358366434&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=590',
          type: 'stationery',
          sales: 890,
          forRoles: ['student']
        },
        {
          id: 27,
          name: '英语单词记忆笔记本',
          description: '科学的笔记方法，提高记忆效率',
          price: 29.9,
          image: 'http://t14.baidu.com/it/u=3810496918,96650836&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'stationery',
          sales: 456,
          forRoles: ['student']
        },
        {
          id: 28,
          name: '英语学习桌面收纳盒',
          description: '分类收纳，整理学习用品',
          price: 59.9,
          image: 'https://img1.baidu.com/it/u=3215574915,3192792791&fm=253&fmt=auto&app=138&f=JPEG?w=731&h=731',
          type: 'stationery',
          sales: 234,
          forRoles: ['student']
        },
        {
          id: 29,
          name: '英语单词涂色本',
          description: '边涂色边学习，放松身心',
          price: 25.9,
          image: 'https://img0.baidu.com/it/u=1570624622,2276605450&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
          type: 'stationery',
          sales: 678,
          forRoles: ['student']
        },
        {
          id: 30,
          name: '英语学习计划本',
          description: '科学规划时间，提高学习效率',
          price: 35.9,
          image: 'https://img2.baidu.com/it/u=3196641727,19349317&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
          type: 'stationery',
          sales: 345,
          forRoles: ['student']
        },
        {
          id: 31,
          name: '英语单词记忆卡片夹',
          description: '便携设计，随身携带复习单词',
          price: 15.9,
          image: 'https://img0.baidu.com/it/u=1920352959,985055115&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1237',
          type: 'stationery',
          sales: 789,
          forRoles: ['student']
        },
        {
          id: 32,
          name: '英语学习文具礼盒',
          description: '精美礼盒装，多种文具组合',
          price: 99.9,
          image: 'http://t14.baidu.com/it/u=2334781828,2879208689&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'stationery',
          sales: 123,
          forRoles: ['student']
        },

        // 通用商品
        {
          id: 7,
          name: '便携式单词扫描笔',
          description: '即扫即译，发音标准，携带方便',
          price: 199.0,
          image: 'https://img2.baidu.com/it/u=1088731057,1250896973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=774',
          type: 'study',
          sales: 156,
          forRoles: ['teacher', 'parent', 'student']
        },
        {
          id: 8,
          name: '英语学习手账本',
          description: '精美设计，内含学习计划表和记录模板',
          price: 29.9,
          image: 'http://t15.baidu.com/it/u=2009371131,1732473814&fm=224&app=112&f=JPEG?w=500&h=500',
          type: 'stationery',
          sales: 289,
          forRoles: ['teacher', 'parent', 'student']
        }
      ]
    }
  },
  computed: {
    userRole() {
      const user = JSON.parse(localStorage.getItem('user'))
      return user?.role || 'student'
    },
    filteredProducts() {
      return this.products.filter((product) => {
        // 角色筛选
        if (!product.forRoles.includes(this.userRole)) {
          return false
        }
        // 分类筛选
        if (this.currentCategory !== 'all' && product.type !== this.currentCategory) {
          return false
        }
        // 关键词搜索
        if (this.searchKeyword) {
          const keyword = this.searchKeyword.toLowerCase()
          return product.name.toLowerCase().includes(keyword) || product.description.toLowerCase().includes(keyword)
        }
        return true
      })
    }
  },
  methods: {
    getTypeLabel(type) {
      const typeMap = {
        teaching: '教材教具',
        study: '学习用品',
        stationery: '文具玩具'
      }
      return typeMap[type] || type
    },
    handleSearch() {
      // 搜索防抖可以在这里实现
    },
    handleBuy(product) {
      this.selectedProduct = product
      this.showBuyDialog = true
    },
    confirmBuy() {
      this.$message.success('购买成功！')
      this.showBuyDialog = false
    }
  }
}
</script>

<style scoped>
.shop-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.shop-header {
  margin-bottom: 30px;
}

.shop-header h2 {
  margin-bottom: 20px;
  color: #303133;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-box {
  width: 100%;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.search-box input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.category-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.category-tag {
  padding: 6px 16px;
  border-radius: 16px;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.category-tag:hover {
  background: #e6e8eb;
}

.category-tag.active {
  background: #409eff;
  color: white;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.product-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
  position: relative;
  padding-top: 75%;
  overflow: hidden;
  background: #f5f7fa;
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.teaching {
  background: #409eff;
}

.study {
  background: #67c23a;
}

.stationery {
  background: #e6a23c;
}

.product-info {
  padding: 16px;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.product-desc {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #909399;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.product-price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: 500;
}

.product-sales {
  font-size: 12px;
  color: #909399;
}

.buy-btn {
  width: 100%;
  padding: 8px 0;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.buy-btn:hover {
  background: #66b1ff;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 400px;
}

.product-preview {
  display: flex;
  gap: 16px;
  margin: 20px 0;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

.product-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.preview-info {
  flex: 1;
}

.preview-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.preview-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: 500;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary,
.btn-secondary {
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-primary:hover {
  background: #66b1ff;
}

.btn-secondary {
  background: #f4f4f5;
  color: #606266;
}

.btn-secondary:hover {
  background: #e9e9eb;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
</style>
